<template>
  <div class="loginBox">
    <div class="loginBox_bg">
      <div class="content">
        <div class="hint">您好，欢迎登录</div>
        <div class="input_item">
          <div class="input_box">
            <img class="input_icon" src="../../assets/images/login/ico_user.png" slot="prefix"/>
            <input class="input_input" placeholder="请输入用户名" v-model="userName" />
          </div>
        </div>

        <div class="input_item">
          <div class="input_box">
            <img class="input_icon" src="../../assets/images/login/ico_pwd.png" slot="prefix"/>
            <input class="input_input" type="password" placeholder="请输入密码" v-model="password"/>
          </div>
        </div>

        <div class="input_item">
          <div class="input_box">
            <img class="input_icon" src="../../assets/images/login/ico_yzm.png" slot="prefix"/>
            <input class="input_input" placeholder="请输入验证码" v-model="imageCode" @keyup.enter="toLogin"/>
          </div>
          <Img class="verify_code" alt="点击刷新" :src="imageCodeSrc" @click="refreshValidCode"/>
        </div>

<!--        <div class="action">-->
<!--          <Checkbox v-model="single">15天内自动登陆</Checkbox>-->
<!--          <div class="action_wangji" @click="openForgetBox">忘记密码？</div>-->
<!--        </div>-->

        <div class="login" @click="toLogin()">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Login',

    data() {
      return {
        userName: null,
        password: null,
        imageCode: null,
        imageCodeSrc: null,
        uuid: Math.random(),
      };
    },

    mounted() {
      this.refreshValidCode();
    },

    computed: {},

    methods: {
      /**
       * 刷新验证码
       */
      refreshValidCode() {
        this.uuid = Math.random();
        this.imageCodeSrc = `http://3ngs39.natappfree.cc/admin/sp/captcha.jpg?uuid=${this.uuid}`;
      },

      /**
       * 校验数据
       */
      verifyData(){
        return this.userName && this.password && this.imageCode;
      },

      /**
       * 登录
       */
      toLogin(){
        if(this.verifyData()){
          this.$api.post('sp/sys/login', {
            loginAccount: this.userName,
            password: this.$utils.util.rsaEncrypt(this.password),
            captcha: this.imageCode,
            uuid: this.uuid,
          }).then((res)=>{
            if(res.data.code === 0){
              // 存储token
              this.$storage.setItem(this.$storage.key.token, res.data.token);
              // 登录成功，请求用户信息
              this.$api.get('sp/sys/user/info').then((info)=>{
                if(info.data.code === 0){
                  // 判断登录的用户和上次是否相同，如果不同，就清空本地存储
                  if(this.$storage.getItem(this.$storage.key.user_key) && this.$storage.getItem(this.$storage.key.user_key).userId !== info.data.user.userId){
                    this.$storage.removeItem(this.$storage.key.nav_key);
                    this.$storage.removeItem(this.$storage.key.tag_nav);
                  }
                  // 保存用户信息
                  this.$storage.setItem(this.$storage.key.user_key, info.data.user);
                  if(this.$route.query.rewrite && !this.$route.query.rewrite.split("#")[1].includes("/login")){
                    location.href = this.$route.query.rewrite+"";
                  }else{
                    this.$router.push({name: "Home"});
                  }
                }else{
                  this.refreshValidCode();
                }
              });
            }else{
              this.refreshValidCode();
            }
          });
        }
      },
    }
  };
</script>

<style scoped lang="less">
  .loginBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    > .loginBox_bg {
      background-image: url("../../assets/images/login/login_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 100vw;
      height: 100vh;
      /*min-width: 19.20rem;*/
      min-height: 10.80rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow-y: auto;
      overflow-x: hidden;

      > .content {
        background-image: url("../../assets/images/login/login_content_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 5.17rem;
        height: 4.90rem;

        margin-top: 3.42rem;

        > .hint {
          font-size: 0.20rem;
          font-weight: 400;
          color: #3388ff;
          margin-top: 0.58rem;
          margin-left: 0.50rem;
        }

        > .input_item {
          margin-top: 0.32rem;
          margin-left: 0.50rem;
          margin-right: 0.50rem;
          width: 4.20rem;
          height: 0.40rem;
          display: flex;
          align-items: center;

          > .input_box {
            display: flex;
            align-items: center;
            flex: 1;
            height: 0.40rem;
            background: #f5f8fc;
            border-radius: 4px;

            > .input_icon {
              margin-left: 0.16rem;
              width: 0.20rem;
            }

            > .input_input {
              display: flex;
              font-size: 0.14rem;
              margin-left: 0.08rem;
              margin-top: 0.02rem;
              border: none;
              flex: 1;
              background-color: transparent;
              color: #333;
            }

            > .input_input::placeholder {
              color: #999;
            }

            > .input_input:focus {
              outline: none;
            }
          }

          > .verify_code {
            cursor: pointer;
            width: 1.32rem;
            height: 0.32rem;
            margin-left: 8px;
          }
        }

        > .action {
          margin-left: 0.50rem;
          margin-right: 0.50rem;
          width: 4.20rem;
          height: 0.20rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.20rem;

          > .action_wangji {
            font-size: 0.14rem;
            font-weight: 400;
            color: #247eed;
            cursor: pointer;
          }

          > .ivu-checkbox-wrapper {
            cursor: pointer;
            font-size: 0.14rem;
            display: inline-block;
            margin-right: 0.08rem;
            font-weight: 400;
            color: #333333;
          }
        }
        > .login {
          width: 4.20rem;
          height: 0.40rem;
          background: #3388ff;
          border-radius: 0.30rem;
          margin-left: 0.50rem;
          margin-top: 0.30rem;
          font-size: 0.20rem;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          line-height: 0.40rem;
          cursor: pointer;
        }
      }
    }
  }
</style>